<template>
	<view class="main">
		<view v-for="item in allState.applyList" :key="item.id" class="flex flex-ai-c list">
			<view class="head-img">
				<image :src="item.handimg || '../../static/img/headimg.jpg'"></image>
			</view>
			<view class="right flex flex-ai-c f1 flex-jc-sb">
				<view>
					<view>{{item.username}}</view>
					<view>申请加入 <text style="color: rgb(247, 119, 14);">{{item.title}}</text></view>
				</view>
				<view class="flex">
					<view class="gz" @click="operate(0,item)" style="margin-right: 15rpx;color: red;border: 1px solid red;">拒绝</view>
					<view class="gz" @click="operate(1,item)">同意</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive,inject
	} from 'vue'
	import {
		onLoad, onShow, onUnload
	} from '@dcloudio/uni-app'
	import chat from '@/api/chat.js'
	const socket : any = inject("$socket");
	let allState = reactive({
		userinfo: uni.getStorageSync('userinfo'),//自己的
		applyList: []
	})
	onUnload(() => {
		socket.removeListener('getApplyCrowd')
	})
	//邀请
	const crowdAdd = async (list : AnyArray, id : Number) => {
		const res = await chat.crowdAdd({
			list: list,
			crowd_id: id
		})
	}
	onLoad(() => {
		socket.on('getApplyCrowd',msg => {
			console.log(msg)
			allState.applyList = msg
		})
	})
	const operate = (type: number,item) => {
		if(type){
			crowdAdd([item],item.id)
		}
		socket.emit('applyCrowdRefuse',JSON.stringify(item))
		socket.emit('getApplyCrowd',allState.userinfo.userid)
	}
	onShow(() => {
		socket.emit('getApplyCrowd',allState.userinfo.userid)
	})
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}
	
	.main {
		height: 100%;
	
		.list {
			position: relative;
			padding: 20rpx;
			border-bottom: 1px solid gainsboro;
		}
	
		.right {
			margin-left: 20rpx;
		}
	
		.gz {
			text-align: center;
			width: 100rpx;
			line-height: 50rpx;
			color: rgb(247, 119, 14);
			height: 50rpx;
			border: 1px solid rgb(247, 119, 14);
			border-radius: 30rpx;
		}
	}
</style>